<template>
	<view class="page">
		<z-paging ref="paging" :default-page-size="params.pageSize" v-model="list" @query="getList">
			<template #top>
				<uni-nav-bar ref="navBar" fixed statusBar title="核销记录" :border="false" backgroundColor="#ffffff"
					@clickLeft="goBack">
					<template v-slot:left>
						<image src="@/static/svg/publicSvg/icon-back.svg" />
					</template>
				</uni-nav-bar>
			</template>
		
			<view>
				<view class="menu-list flex item-center justify-between bg-white">
					<view class="menu-item" v-for="item in menuList" :key="item.id" @click="changeMenu(item)"
						:class="{'active':item.id == params.orderType}">
						{{item.name}}
						<view class="sel-line" v-if="item.id == params.orderType"></view>
					</view>
				</view>
				<view class="flex item-center search-box">
					<image src="@/static/svg/publicSvg/icon-search.svg" mode="heightFix" class="icon-search"></image>
					<input type="text" placeholder="请输入商品名称" class="search-text" v-model="params.goodsName">
				</view>
			<!-- 	<scroll-view scroll-y="true" :style="{'height':h}" @scrolltolower='scrolltolower' refresher-enabled='true'
					:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherrefresh="onRefresh"> -->
					<view class="detail-box" v-for="detail in list" :key="detail.id">
						<view class="flex">
							<image :src="detail.goodsImgs" mode="" class="goods-img"></image>
							<view class="goods-dec flex-col justify-between">
								<view class="goods-name">{{detail.goodsName}}</view>
								<view class="goods-price">￥{{detail.goodsPrice}}</view>
							</view>
						</view>
						<view class="goods-no mt-10">活动：{{ detail.activeTitle }}</view>
						<view class="goods-msg flex justify-between item-center">
							<view class="flex goods-no"><span v-if="detail.totalVerifyNum">核销量：{{ detail.totalVerifyNum }}</span></view>
							<view class="flex item-center color-secondary-info" @click="linkTo(detail)">
								<span class="mr-4">核销明细</span>>
							</view>
						</view>
					</view>
				<!-- </scroll-view>	 -->
				<!-- <view class="release-btn" @click="release">发布商品</view> -->
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		watch
	} from 'vue'
	import {
		mathHeight,
		getOrderStatus
	} from '@/utils/index.js'
	import { pageVerifyRecord, pageVerifyGoods } from '@/api/order.js';
	const h = mathHeight(120)
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/homePages/pages/home/home'
			})
			return
		}
		uni.navigateBack()
	}
	let menuList = reactive([{
			name: '商品',
			id: 1
		},
		{
			name: '活动签到',
			id: 2
		},
		{
			name: '积分商品',
			id: 5
		}
	])
	let params = ref({
		goodsName: '',
		orderType: 1,
		pageNum: 1,
		pageSize: 15
	})
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	let refreshFlag = ref(false)
	const getStatus = (status) => {
		return getOrderStatus(status)
	}
	// 获取列表
	const paging = ref()
	const getList = async (num) => {
		triggered.value = true
		params.value.pageNum = num
		uni.showLoading()
		let api = params.value.orderType === 1 ? pageVerifyGoods : pageVerifyRecord
		let result = await api({
			...params.value
		})
		if (result) {
			// list.value = params.pageNum == 1 ? result.list : (list.value).concat(result.list)
			// total.value = result.total
			paging.value.complete(result.list)
		}
		uni.hideLoading()
		triggered.value = false
		refreshFlag.value = false
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const changeMenu = (item) => {
		params.value.orderType = item.id
		if(item.id === 1){
			
		}
		reFresh()
	}
	const linkTo = (item) => {
		let url
		if(item.activeGoodsId){
			url = `/center/pages/verifyCode/detail?id=${item.activeGoodsId}`
		}else{
			url = `/center/pages/verifyCode/detail?no=${item.subOrderNo}`
		}
		uni.navigateTo({
			url
		})
	}
	watch(() => params.value.goodsName, (val) => {
		reFresh()
	})
	// const scrolltolower = () => {
	// 	if (list.value.length >= total.value) {
	// 		return
	// 	}
	// 	params.pageNum = params.pageNum + 1
	// 	getList()
	// }
	const onRestore = () => {
		// setTimeout(() =>{
		triggered.value = false; // 需要重置
		// },2000)
		// console.log("onRestore");
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	const release = (goods) => {
		uni.navigateTo({
			url: `/center/pages/goods/releaseGoodsPage`,
			events: {
				reFreshPage: (data) => {
					reFresh()
				}
			}
		})
	}
	onMounted(() => {
		// getList()
	})
</script>

<style lang="scss" scoped>
	.search-box {
		height: 36px;
		margin: 10px 20px;
		padding: 10px;
		border-radius: 6px;
		background-color: #ffffff;
		min-height: 20px;
	
		.icon-search {
			height: 20px;
			margin-right: 10px;
		}
	
		.search-text {
			font-size: 12px;
		}
	}
	
	.menu-item {
		margin: 10px 20px 4px 20px;
		padding: 10px 0;
		color: #333333;
		position: relative;
	
		.sel-line {
			position: absolute;
			width: 19px;
			height: 4px;
			border-radius: 4px;
			background: #FA4543;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
	.detail-box{
		margin: 10px 20px;
		box-sizing: border-box;
		// width: calc(100% - 40px);
		padding: 10px 14px;
		background-color: #ffffff;
		border-radius: 8px;
		.goods-img{
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}
		.goods-dec{
			width: calc(100% - 80px);
			margin-left: 20px;
		}
		.goods-name{
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 1);
			width: calc(100% - 58px);
		}
		.goods-price{
			font-size: 12px;
			font-weight: 400;
			line-height: 22px;
			letter-spacing: 0px;
			color:rgba(51, 51, 51, 0.6);
		}
		.goods-msg{
			border-top: 1px solid rgba(245, 245, 245, 1);
			padding-top: 10px;
		}
		.goods-no{
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 0.6);
		}
		.gary-color{
			color: rgba(51, 51, 51, 0.6);
		}
	}
	.release-btn {
		// width: 343px;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	}
</style>
